<template>
  <div id="viewQuestionView">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-tabs v-model="activeName" default-active-key="question">
          <el-tab-pane name="question" label="题目">
            <el-card v-if="problem" :title="problem.title">
              <el-descriptions title="判题条件">
                <el-descriptions-item label="时间限制">
                  {{ problem.judgeConfig.timeLimit ?? 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="内存限制">
                  {{ problem.judgeConfig.memoryLimit ?? 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="堆栈限制">
                  {{ problem.judgeConfig.stackLimit ?? 0 }}
                </el-descriptions-item>
              </el-descriptions>
              <MdViewer :value="problem.content || ''" />
              <template #extra>
                <el-space>
                  <el-tag
                    v-for="(tag, index) of problem.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </el-tag>
                </el-space>
              </template>
            </el-card>
          </el-tab-pane>
          <el-tab-pane name="comment" label="评论" disabled>
            评论区
          </el-tab-pane>
          <el-tab-pane name="answer" label="答案">
            暂时无法查看答案
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12" :md="12" :xs="24">
        <el-form :model="form" layout="inline">
          <el-form-item
            field="language"
            label="编程语言"
            style="min-width: 240px"
          >
            <el-select
              v-model="form.language"
              :style="{ width: '320px' }"
              placeholder="选择编程语言"
            >
              <el-option label="java" value="java"></el-option>
              <el-option label="cpp" value="cpp">cpp</el-option>
              <el-option label="go" value="go">go</el-option>
              <el-option label="html" value="html">html</el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <CodeEditor
          :value="form.code as string"
          :language="form.language"
          :handle-change="changeCode"
        />
        <el-divider size="0" />
        <div>
          <el-button
            class="submit-button"
            type="primary"
            style="min-width: 200px"
            @click="doSubmit"
          >
            提交代码
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from 'vue'
import { ElInput, ElMessage } from 'element-plus'
import CodeEditor from '/@/components/CodeEditor.vue'
import MdViewer from '/@/components/MdViewer.vue'
import type {
  ProblemAddRequest,
  ProblemQueryRequest,
  ProblemSubmitAddRequest,
  ProblemVo,
} from '../../../generated'
import {
  ProblemControllerService,
  ProblemSubmitControllerService,
} from '../../../generated'

const activeName = ref('question')

const problem = ref<ProblemVo>()
const route = useRoute()
const router = useRouter()

const loadData = async () => {
  const id = route.params.id
  console.log(id)
  const res = await ProblemControllerService.getProblemVoById(Number(id))
  console.log(res)
  if (res.code === 200) {
    problem.value = res.data
  } else {
    // message.error('加载失败，' + res.message)
    ElMessage({
      type: 'error',
      message: res.message,
    })
  }
}

const form = ref<ProblemSubmitAddRequest>({
  language: 'java',
  code: '',
  uid: 2,
})

/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!problem.value?.id) {
    return
  }
  const data = {
    ...form.value,
    problemId: problem.value.id,
  }
  console.log(data)
  const res = await ProblemSubmitControllerService.doProblemSubmit(data)
  console.log(res)
  if (res.code === 200) {
    ElMessage({
      type: 'success',
      message: JSON.parse(res.data?.judgeInfo as string).message,
    })
    // message.success('提交成功')
  } else {
    ElMessage({
      type: 'error',
      message: res.message,
    })
  }

  router.push({
    path: '/home/problemSubmitView/',
  })
}

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData()
})

const changeCode = (value: string) => {
  form.value.code = value
}
</script>

<style>
#viewQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}

.submit-button {
  margin: 0 auto;
}
</style>
